
<script lang="ts" setup>
import { ref, onMounted ,watch} from 'vue'
// import { useDashboardStore } from '@/stores/modules/dashboard'
// import { ElMessage } from 'element-plus'
import {
  User,
  ShoppingCart,
  Money,
  Goods
} from '@element-plus/icons-vue'

// 组件导入
import StatCard from '@/components/ui/home/StatCard.vue'
import LineChart from '@/components/ui/home/LineChart.vue'
import PieChart from '@/components/ui/home/PieChart.vue'
import ActivityTable from '@/components/ui/home/ActivityTable.vue'

// 状态管理
// const dashboardStore = useDashboardStore()

// 数据状态
const loading = ref(true)
const chartLoading = ref(true)
const tableLoading = ref(true)
const chartDateRange = ref('7d')

// 静态卡片数据
const cardData = ref([
  { title: '用户数', value: '0', icon: User, color: '#409EFF' },
  { title: '订单量', value: '0', icon: ShoppingCart, color: '#67C23A' },
  { title: '销售额', value: '¥0', icon: Money, color: '#E6A23C' },
  { title: '商品数', value: '0', icon: Goods, color: '#F56C6C' }
])

// 图表数据
const visitData = ref<Array<{ date: string; count: number }>>([])
const sourceData = ref<Array<{ name: string; value: number }>>([])

// 活动数据
const activities = ref<Array<{
  id: number
  user: string
  action: string
  time: string
}>>([])

// 获取仪表盘数据
// const fetchData = async () => {
//   try {
//     loading.value = true
//     chartLoading.value = true
//     tableLoading.value = true

//     // 并发获取所有数据
//     const [stats, charts, logs] = await Promise.all([
//       dashboardStore.getStats(),
//       dashboardStore.getCharts(chartDateRange.value),
//       dashboardStore.getActivities()
//     ])

//     // 更新卡片数据
//     cardData.value = [
//       { ...cardData.value[0], value: stats.userCount.toString() },
//       { ...cardData.value[1], value: stats.orderCount.toString() },
//       { ...cardData.value[2], value: `¥${stats.sales.toLocaleString()}` },
//       { ...cardData.value[3], value: stats.productCount.toString() }
//     ]

//     // 更新图表数据
//     visitData.value = charts.visitTrend
//     sourceData.value = charts.userSource

//     // 更新活动数据
//     activities.value = logs
//   } catch (error) {
//     ElMessage.error('数据加载失败')
//     console.error(error)
//   } finally {
//     loading.value = false
//     chartLoading.value = false
//     tableLoading.value = false
//   }
// }

// 监听日期范围变化
watch(chartDateRange, () => {
  // fetchData()
})

// // 初始化加载数据
onMounted(() => {
  // fetchData()
})
</script>
<template>
  <div class="dashboard-container">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="mb-4">
      <el-col 
        v-for="item in cardData" 
        :key="item.title"
        :xs="24" :sm="12" :md="8" :lg="6"
      >
        <stat-card 
          :title="item.title"
          :value="item.value"
          :icon="item.icon"
          :color="item.color"
          :loading="loading"
        />
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover">
          <template #header>
            <div class="flex justify-between items-center">
              <span>访问趋势</span>
              <el-select 
                v-model="chartDateRange" 
                size="small" 
                style="width: 120px"
              >
                <el-option label="近7天" value="7d" />
                <el-option label="近30天" value="30d" />
              </el-select>
            </div>
          </template>
          <line-chart 
            :data="visitData" 
            :loading="chartLoading"
            height="300px"
          />
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="12">
        <el-card shadow="hover">
          <template #header>
            <span>用户来源</span>
          </template>
          <pie-chart 
            :data="sourceData"
            :loading="chartLoading"
            height="300px"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-card shadow="hover">
      <template #header>
        <span>最近活动</span>
      </template>
      <activity-table :data="activities" :loading="tableLoading" />
    </el-card>
  </div>
</template>


<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  
  .el-card {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.mb-4 {
  margin-bottom: 20px;
}
</style>